<script setup>
import { computed, ref, watch } from "vue";
const props = defineProps({
  list: {
    type: Array,
    default: () => [],
  },
});
const value1 = ref("请选择");
const options = computed(() => props.list);

const getPopupContainer = (dom) => {
  return dom.parentNode;
};
const emit = defineEmits(["value1"]);
const change = () => {
  emit("value1", value1.value);
  console.log(value1.value);
};
</script>

<template>
  <div class="my-selection">
    <a-select
      :getPopupContainer="getPopupContainer"
      v-model:value="value1"
      class="select"
      :options="options"
      @change="change"
    ></a-select>
  </div>
</template>
<style>
.ant-select-dropdown {
  left: 0 !important;
  top: 100% !important;
  background-color: #6c869a !important;
}

.ant-select-focused .ant-select-selection-item {
  color: #fff !important;
}
</style>
<style scoped>
.my-selection {
  width: 100%;
  height: 56px;
  pointer-events: all;
}

.select {
  width: 100%;
  height: 100%;
}
</style>
